<html>
<head>
    <style>
        #content-container {
            width: 700px;
        }
    </style>

    <script>

        function handleLoad(event) {
            console.log("Loaded! ", event);
            console.log();

            let loadedDoc = document.querySelector('link[rel="import"]').import;

            let contentContainer = document.querySelector("#content-container");

            let shadow = contentContainer.attachShadow({mode: 'open'});

            shadow.appendChild(loadedDoc.documentElement);

        }

        function supportsImports() {
            return 'import' in document.createElement('link');
        }

        function expand() {

            let iframe = document.querySelector("iframe");

            let newHeight = iframe.contentDocument.body.scrollHeight;

            //let newHeight = this.iframe.contentDocument.documentElement.clientHeight;
            //console.log("Setting new height to: " + newHeight);
            iframe.style.height = newHeight;

        }

    </script>

    <link rel="import" href="doc.html" onload="handleLoad(event)">

</head>
<body>

<div id="content-container">

</div>


</body>
</html>
